/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: ontologyLibrary
*
* date: 2025/3/20
*/
<template>
  <div class="root_base">
    <div v-if="isEdit" class="content_box">
      <el-radio-group v-model="radio">
        <el-radio :value="item.id" v-for="item in list" :key="item.id" size="large">
          <div class="radio_box">
            <p style="font-size: 16px"> {{ item.label }}</p>
            <div class="btn_box">
              <div @click="editData(item)">
                <el-button link type="primary">
                  <el-icon>
                    <View/>
                  </el-icon>
                  <span style="margin-left: 3px">查看</span>
                </el-button>
              </div>
              <el-popconfirm width="220"
                             :icon="InfoFilled"
                             icon-color="#626AEF"
                             @confirm="confirmDelete1"
                             title="是否确认要删除该数据?"
                             confirm-button-text="确认"
                             cancel-button-text="取消">
                <template #reference>
                  <el-button link type="danger">
                    <el-icon class="el-icon--right">
                      <Delete/>
                    </el-icon>
                    <span style="margin-left: 3px">删除</span>
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </el-radio>
      </el-radio-group>
    </div>
    <div v-else class="content_box">
      <div class="top_bar">
        <el-button link type="primary" @click="backPage">
          <el-icon>
            <Back/>
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
      <div>
        <el-table :data="editCurrentData" style="width: 100%">
          <el-table-column type="index" width="60" label="序号" align="center"/>
          <el-table-column prop="label" label="本体名称" align="center">
            <template #default="{row}">
              <el-input v-model="row.label" style="width: 240px" placeholder="请输入本体名称" v-if="row.isCurrentEdit"/>
              <span style="font-size: 16px" v-else>{{ row.label }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="color" label="颜色" align="center">
            <template #default="{row}">
              <div>
                <el-color-picker v-model="row.color" :predefine="predefine" :disabled="!row.isCurrentEdit"/>
                <span style="margin-left: 10px">{{ row.color }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="操作" align="center">
            <template #default="{row}">
              <el-button link type="primary" @click="editNodeData(row)" v-if="!row.isCurrentEdit">
                <el-icon class="el-icon--right">
                  <Edit/>
                </el-icon>
                <span style="margin-left: 3px">编辑</span>
              </el-button>
              <el-button link type="primary" @click="editNodeData(row)" v-else>
                <el-icon>
                  <Finished/>
                </el-icon>
                <span style="margin-left: 3px">保存</span>
              </el-button>
              <el-popconfirm width="220"
                             :icon="InfoFilled"
                             icon-color="#626AEF"
                             @confirm="confirmDelete2"
                             title="是否确认要删除该数据?"
                             confirm-button-text="确认"
                             cancel-button-text="取消">
                <template #reference>
                  <el-button link type="danger">
                    <el-icon class="el-icon--right">
                      <Delete/>
                    </el-icon>
                    <span style="margin-left: 3px">删除</span>
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {Delete, Edit, Back, Finished, InfoFilled, View} from '@element-plus/icons-vue'
// 预置颜色
let predefine = ['#fff', '#ccc', '#999', '#666', '#333', '#00ff00']
// 是否编辑状态
let isEdit = ref(true)
// 当前编辑数据
let editCurrentData = ref([])
// 数据列表
let list = [
  {
    id: 1,
    label: '本体1',
    children: [
      {
        id: 1,
        label: '本体1-1',
        color: '#2840da'
      }, {
        id: 2,
        label: '本体1-2',
        color: '#2840da'
      }, {
        id: 3,
        label: '本体1-3',
        color: '#2840da'
      }, {
        id: 4,
        label: '本体1-4',
        color: '#2840da'
      }, {
        id: 5,
        label: '本体1-5',
        color: '#2840da'
      },
    ]
  }, {
    id: 2,
    label: '本体2',
    children: [
      {
        id: 1,
        label: '本体1-1',
        color: '#2840da'
      }, {
        id: 2,
        label: '本体1-2',
        color: '#2840da'
      }, {
        id: 3,
        label: '本体1-3',
        color: '#2840da'
      }, {
        id: 4,
        label: '本体1-4',
        color: '#2840da'
      }, {
        id: 5,
        label: '本体1-5',
        color: '#2840da'
      },
    ]
  }, {
    id: 3,
    label: '本体3',
    children: [
      {
        id: 1,
        label: '本体1-1',
        color: '#2840da'
      }, {
        id: 2,
        label: '本体1-2',
        color: '#2840da'
      }, {
        id: 3,
        label: '本体1-3',
        color: '#2840da'
      }, {
        id: 4,
        label: '本体1-4',
        color: '#2840da'
      }, {
        id: 5,
        label: '本体1-5',
        color: '#2840da'
      },
    ]
  }, {
    id: 4,
    label: '本体4',
    children: [
      {
        id: 1,
        label: '本体1-1',
        color: '#2840da'
      }, {
        id: 2,
        label: '本体1-2',
        color: '#2840da'
      }, {
        id: 3,
        label: '本体1-3',
        color: '#2840da'
      }, {
        id: 4,
        label: '本体1-4',
        color: '#2840da'
      }, {
        id: 5,
        label: '本体1-5',
        color: '#2840da'
      },
    ]
  }, {
    id: 5,
    label: '本体5',
    children: [
      {
        id: 1,
        label: '本体1-1',
        color: '#2840da'
      }, {
        id: 2,
        label: '本体1-2',
        color: '#2840da'
      }, {
        id: 3,
        label: '本体1-3',
        color: '#2840da'
      }, {
        id: 4,
        label: '本体1-4',
        color: '#2840da'
      }, {
        id: 5,
        label: '本体1-5',
        color: '#2840da'
      },
    ]
  },
]
// 当前选中的面板
let radio = ref(1)

// 编辑本体数据
function editData(item) {
  isEdit.value = !isEdit.value
  editCurrentData.value = item.children
}

// 切换本体节点颜色
function editNodeData(item) {
  item.isCurrentEdit = !item.isCurrentEdit
}

// 返回
function backPage() {
  isEdit.value = !isEdit.value
}

// 删除本体数据
function confirmDelete1() {
}

//删除节点数据
function confirmDelete2() {
}
</script>

<style scoped lang="less">
.root_base {
  width: 100%;
  height: 100%;
  padding: 20px 60px;

  .content_box {
    .top_bar {
      height: 40px;
    }

    .btn_box {
      display: flex;
    }

    :deep(.el-color-picker__trigger) {
      padding: 2px;
      width: 50px;
      height: 20px;
      line-height: 20px;
      box-sizing: border-box;
    }
  }

  .el-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    .radio_box {
      display: flex;
      width: 100%;
      justify-content: space-between;

    }

    .el-radio {
      width: 100%;
      height: 42px;
      line-height: 42px;
      display: flex;
      background: rgba(0, 0, 0, 0.04);
      margin-bottom: 14px;
      padding: 0 10px;
      border-radius: 4px;

      :deep(.el-radio__label) {
        flex: 1;
      }
    }
  }
}
</style>
